<template>
<div class="relative">
  <input
      ref="input"
      class="w-full h-full py-30 px-22 box-border"
      type="text"
      :style="{'background': bgColor, 'color': color}"
      :value="value"
      @input="changeVal"
      :placeholder="placeholder"
      maxlength="6"
  >
  <div class="absolute flex items-center text-blue font-28 btn">
    <img @click="clear" v-show="value.length > 0" class="w-34 h-34 mr-25" src="~@/assets/image/c2c/delete.png" alt="">
    <span @click="rightClick">{{ btnText }}</span>
  </div>
</div>
</template>

<script>
export default {
  name: "BusInput",
  // props: ['value', 'bgColor']
  props: {
    value: {
      required: true
    },
    bgColor: {
      default: '#F5F5F5'
    },
    color: {
      default: '#000'
    },
    placeholder: {
      required: true
    },
    btnText: {

    },
    maxlength: {
      default: 20
    }
  },
  methods: {
    changeVal(e) {
      const reg = /^\d*$/;
      if ( reg.test(e.target.value) ) {
        this.$emit("input", e.target.value)
      } else {
        const value = e.target.value
        e.target.value = value.slice(0,value.length - 1)
      }
    },
    clear() {
      this.value = ''
      this.$refs.input.focus();
    },
    rightClick() {
      this.$emit('right-click')
    }
  }
}
</script>

<style lang="scss" scoped>
input {
  border: none;
  outline: none;
  border-radius: 10px;
  color: #000;

  &::placeholder {
    color: #B8BCC5;
  }
}


.btn {
  top: 50%;
  right: 36px;
  transform: translateY(-50%);
}
</style>